<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3271681" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xf0af;</span>
                <div class="name">硬盘</div>
                <div class="code-name">&amp;#xf0af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0ae;</span>
                <div class="name">链接</div>
                <div class="code-name">&amp;#xf0ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0ab;</span>
                <div class="name">添加_文件</div>
                <div class="code-name">&amp;#xf0ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0ac;</span>
                <div class="name">添加_文件_1</div>
                <div class="code-name">&amp;#xf0ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0ad;</span>
                <div class="name">添加_图片</div>
                <div class="code-name">&amp;#xf0ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0aa;</span>
                <div class="name">复制_链接</div>
                <div class="code-name">&amp;#xf0aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a9;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#xf0a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a7;</span>
                <div class="name">旋转_右_1</div>
                <div class="code-name">&amp;#xf0a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a8;</span>
                <div class="name">旋转_左_1</div>
                <div class="code-name">&amp;#xf0a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a5;</span>
                <div class="name">插入_下方</div>
                <div class="code-name">&amp;#xf0a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a6;</span>
                <div class="name">插入_上方</div>
                <div class="code-name">&amp;#xf0a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a4;</span>
                <div class="name">相机</div>
                <div class="code-name">&amp;#xf0a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a3;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xf0a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf097;</span>
                <div class="name">应用菜单</div>
                <div class="code-name">&amp;#xf097;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf098;</span>
                <div class="name">光标</div>
                <div class="code-name">&amp;#xf098;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf099;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xf099;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf09a;</span>
                <div class="name">风车</div>
                <div class="code-name">&amp;#xf09a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf09b;</span>
                <div class="name">巫师帽</div>
                <div class="code-name">&amp;#xf09b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf09c;</span>
                <div class="name">星球</div>
                <div class="code-name">&amp;#xf09c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf09d;</span>
                <div class="name">心</div>
                <div class="code-name">&amp;#xf09d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf09e;</span>
                <div class="name">移动</div>
                <div class="code-name">&amp;#xf09e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf09f;</span>
                <div class="name">代码</div>
                <div class="code-name">&amp;#xf09f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a0;</span>
                <div class="name">地球_1</div>
                <div class="code-name">&amp;#xf0a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a1;</span>
                <div class="name">骷髅</div>
                <div class="code-name">&amp;#xf0a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0a2;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xf0a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf054;</span>
                <div class="name">方向_上</div>
                <div class="code-name">&amp;#xf054;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf055;</span>
                <div class="name">方向_左</div>
                <div class="code-name">&amp;#xf055;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf056;</span>
                <div class="name">方向_右</div>
                <div class="code-name">&amp;#xf056;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf057;</span>
                <div class="name">方向_下</div>
                <div class="code-name">&amp;#xf057;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf058;</span>
                <div class="name">方向_右_1</div>
                <div class="code-name">&amp;#xf058;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf059;</span>
                <div class="name">方向_上_1</div>
                <div class="code-name">&amp;#xf059;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf05a;</span>
                <div class="name">方向_左_1</div>
                <div class="code-name">&amp;#xf05a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf05b;</span>
                <div class="name">方向_下_1</div>
                <div class="code-name">&amp;#xf05b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf05e;</span>
                <div class="name">方向_上_2</div>
                <div class="code-name">&amp;#xf05e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf05f;</span>
                <div class="name">方向_左_2</div>
                <div class="code-name">&amp;#xf05f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf060;</span>
                <div class="name">方向_下_2</div>
                <div class="code-name">&amp;#xf060;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf061;</span>
                <div class="name">方向_右_2</div>
                <div class="code-name">&amp;#xf061;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf062;</span>
                <div class="name">方向_下_3</div>
                <div class="code-name">&amp;#xf062;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf063;</span>
                <div class="name">方向_左_3</div>
                <div class="code-name">&amp;#xf063;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf064;</span>
                <div class="name">方向_上_3</div>
                <div class="code-name">&amp;#xf064;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf065;</span>
                <div class="name">方向_右_3</div>
                <div class="code-name">&amp;#xf065;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf066;</span>
                <div class="name">逻辑_错</div>
                <div class="code-name">&amp;#xf066;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf068;</span>
                <div class="name">逻辑_对</div>
                <div class="code-name">&amp;#xf068;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf090;</span>
                <div class="name">逻辑_加</div>
                <div class="code-name">&amp;#xf090;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf091;</span>
                <div class="name">逻辑_加_1</div>
                <div class="code-name">&amp;#xf091;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf092;</span>
                <div class="name">逻辑_信息</div>
                <div class="code-name">&amp;#xf092;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf093;</span>
                <div class="name">逻辑_禁止</div>
                <div class="code-name">&amp;#xf093;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf094;</span>
                <div class="name">逻辑_警告</div>
                <div class="code-name">&amp;#xf094;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf095;</span>
                <div class="name">逻辑_减_1</div>
                <div class="code-name">&amp;#xf095;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf096;</span>
                <div class="name">逻辑_减</div>
                <div class="code-name">&amp;#xf096;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf07d;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xf07d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf07e;</span>
                <div class="name">火箭</div>
                <div class="code-name">&amp;#xf07e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf07f;</span>
                <div class="name">举报</div>
                <div class="code-name">&amp;#xf07f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf080;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xf080;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf081;</span>
                <div class="name">锁定</div>
                <div class="code-name">&amp;#xf081;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf082;</span>
                <div class="name">系统_1</div>
                <div class="code-name">&amp;#xf082;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf083;</span>
                <div class="name">旋转_右</div>
                <div class="code-name">&amp;#xf083;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf084;</span>
                <div class="name">手机</div>
                <div class="code-name">&amp;#xf084;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf085;</span>
                <div class="name">实验</div>
                <div class="code-name">&amp;#xf085;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf086;</span>
                <div class="name">旋转_左</div>
                <div class="code-name">&amp;#xf086;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf087;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xf087;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf088;</span>
                <div class="name">地球</div>
                <div class="code-name">&amp;#xf088;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf089;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xf089;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf08a;</span>
                <div class="name">logo_lovephp_cube</div>
                <div class="code-name">&amp;#xf08a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf08b;</span>
                <div class="name">logo_lovephp</div>
                <div class="code-name">&amp;#xf08b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf08c;</span>
                <div class="name">sns_微博</div>
                <div class="code-name">&amp;#xf08c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf08d;</span>
                <div class="name">sns_微信</div>
                <div class="code-name">&amp;#xf08d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf08e;</span>
                <div class="name">sns_qq</div>
                <div class="code-name">&amp;#xf08e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf08f;</span>
                <div class="name">sns_苹果</div>
                <div class="code-name">&amp;#xf08f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf067;</span>
                <div class="name">逻辑_疑问</div>
                <div class="code-name">&amp;#xf067;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf069;</span>
                <div class="name">选项_0</div>
                <div class="code-name">&amp;#xf069;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf06a;</span>
                <div class="name">选项_3</div>
                <div class="code-name">&amp;#xf06a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf06b;</span>
                <div class="name">选项_1</div>
                <div class="code-name">&amp;#xf06b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf06c;</span>
                <div class="name">选项_2</div>
                <div class="code-name">&amp;#xf06c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf06d;</span>
                <div class="name">逻辑_错_2</div>
                <div class="code-name">&amp;#xf06d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf06e;</span>
                <div class="name">逻辑_加_2</div>
                <div class="code-name">&amp;#xf06e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf06f;</span>
                <div class="name">逻辑_减_2</div>
                <div class="code-name">&amp;#xf06f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf070;</span>
                <div class="name">逻辑_对_2</div>
                <div class="code-name">&amp;#xf070;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf071;</span>
                <div class="name">收藏_1</div>
                <div class="code-name">&amp;#xf071;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf072;</span>
                <div class="name">收藏_0</div>
                <div class="code-name">&amp;#xf072;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf073;</span>
                <div class="name">文件_编辑</div>
                <div class="code-name">&amp;#xf073;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf074;</span>
                <div class="name">文件_文档</div>
                <div class="code-name">&amp;#xf074;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf075;</span>
                <div class="name">文件_重点</div>
                <div class="code-name">&amp;#xf075;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf076;</span>
                <div class="name">飞机</div>
                <div class="code-name">&amp;#xf076;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf077;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xf077;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf078;</span>
                <div class="name">井号</div>
                <div class="code-name">&amp;#xf078;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf079;</span>
                <div class="name">系统</div>
                <div class="code-name">&amp;#xf079;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf07a;</span>
                <div class="name">程序</div>
                <div class="code-name">&amp;#xf07a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf07b;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xf07b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf07c;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xf07c;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1655277656993') format('woff2'),
       url('iconfont.woff?t=1655277656993') format('woff'),
       url('iconfont.ttf?t=1655277656993') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-yingpan"></span>
            <div class="name">
              硬盘
            </div>
            <div class="code-name">.icon-yingpan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lianjie"></span>
            <div class="name">
              链接
            </div>
            <div class="code-name">.icon-lianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia_wenjian"></span>
            <div class="name">
              添加_文件
            </div>
            <div class="code-name">.icon-tianjia_wenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia_wenjian_1"></span>
            <div class="name">
              添加_文件_1
            </div>
            <div class="code-name">.icon-tianjia_wenjian_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia_tupian"></span>
            <div class="name">
              添加_图片
            </div>
            <div class="code-name">.icon-tianjia_tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuzhi_lianjie"></span>
            <div class="name">
              复制_链接
            </div>
            <div class="code-name">.icon-fuzhi_lianjie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuye"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.icon-zhuye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanzhuan_you_1"></span>
            <div class="name">
              旋转_右_1
            </div>
            <div class="code-name">.icon-xuanzhuan_you_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanzhuan_zuo_1"></span>
            <div class="name">
              旋转_左_1
            </div>
            <div class="code-name">.icon-xuanzhuan_zuo_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-charu_xiafang"></span>
            <div class="name">
              插入_下方
            </div>
            <div class="code-name">.icon-charu_xiafang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-charu_shangfang"></span>
            <div class="name">
              插入_上方
            </div>
            <div class="code-name">.icon-charu_shangfang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangji"></span>
            <div class="name">
              相机
            </div>
            <div class="code-name">.icon-xiangji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingyongcaidan"></span>
            <div class="name">
              应用菜单
            </div>
            <div class="code-name">.icon-yingyongcaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guangbiao"></span>
            <div class="name">
              光标
            </div>
            <div class="code-name">.icon-guangbiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengche"></span>
            <div class="name">
              风车
            </div>
            <div class="code-name">.icon-fengche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wushimao"></span>
            <div class="name">
              巫师帽
            </div>
            <div class="code-name">.icon-wushimao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingqiu"></span>
            <div class="name">
              星球
            </div>
            <div class="code-name">.icon-xingqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xin"></span>
            <div class="name">
              心
            </div>
            <div class="code-name">.icon-xin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yidong"></span>
            <div class="name">
              移动
            </div>
            <div class="code-name">.icon-yidong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daima"></span>
            <div class="name">
              代码
            </div>
            <div class="code-name">.icon-daima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diqiu_1"></span>
            <div class="name">
              地球_1
            </div>
            <div class="code-name">.icon-diqiu_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kulou"></span>
            <div class="name">
              骷髅
            </div>
            <div class="code-name">.icon-kulou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_shang"></span>
            <div class="name">
              方向_上
            </div>
            <div class="code-name">.icon-fangxiang_shang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_zuo"></span>
            <div class="name">
              方向_左
            </div>
            <div class="code-name">.icon-fangxiang_zuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_shang1"></span>
            <div class="name">
              方向_右
            </div>
            <div class="code-name">.icon-fangxiang_shang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_shang2"></span>
            <div class="name">
              方向_下
            </div>
            <div class="code-name">.icon-fangxiang_shang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_you_1"></span>
            <div class="name">
              方向_右_1
            </div>
            <div class="code-name">.icon-fangxiang_you_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_you_11"></span>
            <div class="name">
              方向_上_1
            </div>
            <div class="code-name">.icon-fangxiang_you_11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_you_12"></span>
            <div class="name">
              方向_左_1
            </div>
            <div class="code-name">.icon-fangxiang_you_12
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_you_13"></span>
            <div class="name">
              方向_下_1
            </div>
            <div class="code-name">.icon-fangxiang_you_13
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_shang_2"></span>
            <div class="name">
              方向_上_2
            </div>
            <div class="code-name">.icon-fangxiang_shang_2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_shang_21"></span>
            <div class="name">
              方向_左_2
            </div>
            <div class="code-name">.icon-fangxiang_shang_21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_shang_22"></span>
            <div class="name">
              方向_下_2
            </div>
            <div class="code-name">.icon-fangxiang_shang_22
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_shang_23"></span>
            <div class="name">
              方向_右_2
            </div>
            <div class="code-name">.icon-fangxiang_shang_23
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_xia_3"></span>
            <div class="name">
              方向_下_3
            </div>
            <div class="code-name">.icon-fangxiang_xia_3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_zuo_3"></span>
            <div class="name">
              方向_左_3
            </div>
            <div class="code-name">.icon-fangxiang_zuo_3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_shang_3"></span>
            <div class="name">
              方向_上_3
            </div>
            <div class="code-name">.icon-fangxiang_shang_3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangxiang_you_3"></span>
            <div class="name">
              方向_右_3
            </div>
            <div class="code-name">.icon-fangxiang_you_3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_cuo"></span>
            <div class="name">
              逻辑_错
            </div>
            <div class="code-name">.icon-luoji_cuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_dui"></span>
            <div class="name">
              逻辑_对
            </div>
            <div class="code-name">.icon-luoji_dui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_jia"></span>
            <div class="name">
              逻辑_加
            </div>
            <div class="code-name">.icon-luoji_jia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_jia_1"></span>
            <div class="name">
              逻辑_加_1
            </div>
            <div class="code-name">.icon-luoji_jia_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_xinxi"></span>
            <div class="name">
              逻辑_信息
            </div>
            <div class="code-name">.icon-luoji_xinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_jinzhi"></span>
            <div class="name">
              逻辑_禁止
            </div>
            <div class="code-name">.icon-luoji_jinzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_jinggao"></span>
            <div class="name">
              逻辑_警告
            </div>
            <div class="code-name">.icon-luoji_jinggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_jian_1"></span>
            <div class="name">
              逻辑_减_1
            </div>
            <div class="code-name">.icon-luoji_jian_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_jian"></span>
            <div class="name">
              逻辑_减
            </div>
            <div class="code-name">.icon-luoji_jian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huojian"></span>
            <div class="name">
              火箭
            </div>
            <div class="code-name">.icon-huojian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jubao"></span>
            <div class="name">
              举报
            </div>
            <div class="code-name">.icon-jubao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suoding"></span>
            <div class="name">
              锁定
            </div>
            <div class="code-name">.icon-suoding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitong_1"></span>
            <div class="name">
              系统_1
            </div>
            <div class="code-name">.icon-xitong_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanzhuan_you"></span>
            <div class="name">
              旋转_右
            </div>
            <div class="code-name">.icon-xuanzhuan_you
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouji"></span>
            <div class="name">
              手机
            </div>
            <div class="code-name">.icon-shouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shiyan"></span>
            <div class="name">
              实验
            </div>
            <div class="code-name">.icon-shiyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanzhuan_zuo"></span>
            <div class="name">
              旋转_左
            </div>
            <div class="code-name">.icon-xuanzhuan_zuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diqiu"></span>
            <div class="name">
              地球
            </div>
            <div class="code-name">.icon-diqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquan"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.icon-anquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-lovephplogoai_temp"></span>
            <div class="name">
              logo_lovephp_cube
            </div>
            <div class="code-name">.icon-a-lovephplogoai_temp
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-logo_lovephp"></span>
            <div class="name">
              logo_lovephp
            </div>
            <div class="code-name">.icon-logo_lovephp
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sns_weibo"></span>
            <div class="name">
              sns_微博
            </div>
            <div class="code-name">.icon-sns_weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sns_weixin"></span>
            <div class="name">
              sns_微信
            </div>
            <div class="code-name">.icon-sns_weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sns_qq"></span>
            <div class="name">
              sns_qq
            </div>
            <div class="code-name">.icon-sns_qq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sns_pingguo"></span>
            <div class="name">
              sns_苹果
            </div>
            <div class="code-name">.icon-sns_pingguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_yiwen"></span>
            <div class="name">
              逻辑_疑问
            </div>
            <div class="code-name">.icon-luoji_yiwen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanxiang_0"></span>
            <div class="name">
              选项_0
            </div>
            <div class="code-name">.icon-xuanxiang_0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanxiang_3"></span>
            <div class="name">
              选项_3
            </div>
            <div class="code-name">.icon-xuanxiang_3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanxiang_1"></span>
            <div class="name">
              选项_1
            </div>
            <div class="code-name">.icon-xuanxiang_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanxiang_2"></span>
            <div class="name">
              选项_2
            </div>
            <div class="code-name">.icon-xuanxiang_2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_cuo_2"></span>
            <div class="name">
              逻辑_错_2
            </div>
            <div class="code-name">.icon-luoji_cuo_2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_jia_2"></span>
            <div class="name">
              逻辑_加_2
            </div>
            <div class="code-name">.icon-luoji_jia_2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_jian_2"></span>
            <div class="name">
              逻辑_减_2
            </div>
            <div class="code-name">.icon-luoji_jian_2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luoji_dui_2"></span>
            <div class="name">
              逻辑_对_2
            </div>
            <div class="code-name">.icon-luoji_dui_2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang_1"></span>
            <div class="name">
              收藏_1
            </div>
            <div class="code-name">.icon-shoucang_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang_0"></span>
            <div class="name">
              收藏_0
            </div>
            <div class="code-name">.icon-shoucang_0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian_bianji"></span>
            <div class="name">
              文件_编辑
            </div>
            <div class="code-name">.icon-wenjian_bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian_wendang"></span>
            <div class="name">
              文件_文档
            </div>
            <div class="code-name">.icon-wenjian_wendang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian_zhongdian"></span>
            <div class="name">
              文件_重点
            </div>
            <div class="code-name">.icon-wenjian_zhongdian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feiji"></span>
            <div class="name">
              飞机
            </div>
            <div class="code-name">.icon-feiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinghao"></span>
            <div class="name">
              井号
            </div>
            <div class="code-name">.icon-jinghao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitong"></span>
            <div class="name">
              系统
            </div>
            <div class="code-name">.icon-xitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengxu"></span>
            <div class="name">
              程序
            </div>
            <div class="code-name">.icon-chengxu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingpan"></use>
                </svg>
                <div class="name">硬盘</div>
                <div class="code-name">#icon-yingpan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lianjie"></use>
                </svg>
                <div class="name">链接</div>
                <div class="code-name">#icon-lianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia_wenjian"></use>
                </svg>
                <div class="name">添加_文件</div>
                <div class="code-name">#icon-tianjia_wenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia_wenjian_1"></use>
                </svg>
                <div class="name">添加_文件_1</div>
                <div class="code-name">#icon-tianjia_wenjian_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia_tupian"></use>
                </svg>
                <div class="name">添加_图片</div>
                <div class="code-name">#icon-tianjia_tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi_lianjie"></use>
                </svg>
                <div class="name">复制_链接</div>
                <div class="code-name">#icon-fuzhi_lianjie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuye"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#icon-zhuye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhuan_you_1"></use>
                </svg>
                <div class="name">旋转_右_1</div>
                <div class="code-name">#icon-xuanzhuan_you_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhuan_zuo_1"></use>
                </svg>
                <div class="name">旋转_左_1</div>
                <div class="code-name">#icon-xuanzhuan_zuo_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-charu_xiafang"></use>
                </svg>
                <div class="name">插入_下方</div>
                <div class="code-name">#icon-charu_xiafang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-charu_shangfang"></use>
                </svg>
                <div class="name">插入_上方</div>
                <div class="code-name">#icon-charu_shangfang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangji"></use>
                </svg>
                <div class="name">相机</div>
                <div class="code-name">#icon-xiangji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingyongcaidan"></use>
                </svg>
                <div class="name">应用菜单</div>
                <div class="code-name">#icon-yingyongcaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guangbiao"></use>
                </svg>
                <div class="name">光标</div>
                <div class="code-name">#icon-guangbiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengche"></use>
                </svg>
                <div class="name">风车</div>
                <div class="code-name">#icon-fengche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wushimao"></use>
                </svg>
                <div class="name">巫师帽</div>
                <div class="code-name">#icon-wushimao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingqiu"></use>
                </svg>
                <div class="name">星球</div>
                <div class="code-name">#icon-xingqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xin"></use>
                </svg>
                <div class="name">心</div>
                <div class="code-name">#icon-xin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yidong"></use>
                </svg>
                <div class="name">移动</div>
                <div class="code-name">#icon-yidong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daima"></use>
                </svg>
                <div class="name">代码</div>
                <div class="code-name">#icon-daima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diqiu_1"></use>
                </svg>
                <div class="name">地球_1</div>
                <div class="code-name">#icon-diqiu_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kulou"></use>
                </svg>
                <div class="name">骷髅</div>
                <div class="code-name">#icon-kulou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_shang"></use>
                </svg>
                <div class="name">方向_上</div>
                <div class="code-name">#icon-fangxiang_shang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_zuo"></use>
                </svg>
                <div class="name">方向_左</div>
                <div class="code-name">#icon-fangxiang_zuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_shang1"></use>
                </svg>
                <div class="name">方向_右</div>
                <div class="code-name">#icon-fangxiang_shang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_shang2"></use>
                </svg>
                <div class="name">方向_下</div>
                <div class="code-name">#icon-fangxiang_shang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_you_1"></use>
                </svg>
                <div class="name">方向_右_1</div>
                <div class="code-name">#icon-fangxiang_you_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_you_11"></use>
                </svg>
                <div class="name">方向_上_1</div>
                <div class="code-name">#icon-fangxiang_you_11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_you_12"></use>
                </svg>
                <div class="name">方向_左_1</div>
                <div class="code-name">#icon-fangxiang_you_12</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_you_13"></use>
                </svg>
                <div class="name">方向_下_1</div>
                <div class="code-name">#icon-fangxiang_you_13</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_shang_2"></use>
                </svg>
                <div class="name">方向_上_2</div>
                <div class="code-name">#icon-fangxiang_shang_2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_shang_21"></use>
                </svg>
                <div class="name">方向_左_2</div>
                <div class="code-name">#icon-fangxiang_shang_21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_shang_22"></use>
                </svg>
                <div class="name">方向_下_2</div>
                <div class="code-name">#icon-fangxiang_shang_22</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_shang_23"></use>
                </svg>
                <div class="name">方向_右_2</div>
                <div class="code-name">#icon-fangxiang_shang_23</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_xia_3"></use>
                </svg>
                <div class="name">方向_下_3</div>
                <div class="code-name">#icon-fangxiang_xia_3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_zuo_3"></use>
                </svg>
                <div class="name">方向_左_3</div>
                <div class="code-name">#icon-fangxiang_zuo_3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_shang_3"></use>
                </svg>
                <div class="name">方向_上_3</div>
                <div class="code-name">#icon-fangxiang_shang_3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangxiang_you_3"></use>
                </svg>
                <div class="name">方向_右_3</div>
                <div class="code-name">#icon-fangxiang_you_3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_cuo"></use>
                </svg>
                <div class="name">逻辑_错</div>
                <div class="code-name">#icon-luoji_cuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_dui"></use>
                </svg>
                <div class="name">逻辑_对</div>
                <div class="code-name">#icon-luoji_dui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_jia"></use>
                </svg>
                <div class="name">逻辑_加</div>
                <div class="code-name">#icon-luoji_jia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_jia_1"></use>
                </svg>
                <div class="name">逻辑_加_1</div>
                <div class="code-name">#icon-luoji_jia_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_xinxi"></use>
                </svg>
                <div class="name">逻辑_信息</div>
                <div class="code-name">#icon-luoji_xinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_jinzhi"></use>
                </svg>
                <div class="name">逻辑_禁止</div>
                <div class="code-name">#icon-luoji_jinzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_jinggao"></use>
                </svg>
                <div class="name">逻辑_警告</div>
                <div class="code-name">#icon-luoji_jinggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_jian_1"></use>
                </svg>
                <div class="name">逻辑_减_1</div>
                <div class="code-name">#icon-luoji_jian_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_jian"></use>
                </svg>
                <div class="name">逻辑_减</div>
                <div class="code-name">#icon-luoji_jian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huojian"></use>
                </svg>
                <div class="name">火箭</div>
                <div class="code-name">#icon-huojian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jubao"></use>
                </svg>
                <div class="name">举报</div>
                <div class="code-name">#icon-jubao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoding"></use>
                </svg>
                <div class="name">锁定</div>
                <div class="code-name">#icon-suoding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitong_1"></use>
                </svg>
                <div class="name">系统_1</div>
                <div class="code-name">#icon-xitong_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhuan_you"></use>
                </svg>
                <div class="name">旋转_右</div>
                <div class="code-name">#icon-xuanzhuan_you</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouji"></use>
                </svg>
                <div class="name">手机</div>
                <div class="code-name">#icon-shouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shiyan"></use>
                </svg>
                <div class="name">实验</div>
                <div class="code-name">#icon-shiyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhuan_zuo"></use>
                </svg>
                <div class="name">旋转_左</div>
                <div class="code-name">#icon-xuanzhuan_zuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diqiu"></use>
                </svg>
                <div class="name">地球</div>
                <div class="code-name">#icon-diqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquan"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#icon-anquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-lovephplogoai_temp"></use>
                </svg>
                <div class="name">logo_lovephp_cube</div>
                <div class="code-name">#icon-a-lovephplogoai_temp</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logo_lovephp"></use>
                </svg>
                <div class="name">logo_lovephp</div>
                <div class="code-name">#icon-logo_lovephp</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sns_weibo"></use>
                </svg>
                <div class="name">sns_微博</div>
                <div class="code-name">#icon-sns_weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sns_weixin"></use>
                </svg>
                <div class="name">sns_微信</div>
                <div class="code-name">#icon-sns_weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sns_qq"></use>
                </svg>
                <div class="name">sns_qq</div>
                <div class="code-name">#icon-sns_qq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sns_pingguo"></use>
                </svg>
                <div class="name">sns_苹果</div>
                <div class="code-name">#icon-sns_pingguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_yiwen"></use>
                </svg>
                <div class="name">逻辑_疑问</div>
                <div class="code-name">#icon-luoji_yiwen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanxiang_0"></use>
                </svg>
                <div class="name">选项_0</div>
                <div class="code-name">#icon-xuanxiang_0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanxiang_3"></use>
                </svg>
                <div class="name">选项_3</div>
                <div class="code-name">#icon-xuanxiang_3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanxiang_1"></use>
                </svg>
                <div class="name">选项_1</div>
                <div class="code-name">#icon-xuanxiang_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanxiang_2"></use>
                </svg>
                <div class="name">选项_2</div>
                <div class="code-name">#icon-xuanxiang_2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_cuo_2"></use>
                </svg>
                <div class="name">逻辑_错_2</div>
                <div class="code-name">#icon-luoji_cuo_2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_jia_2"></use>
                </svg>
                <div class="name">逻辑_加_2</div>
                <div class="code-name">#icon-luoji_jia_2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_jian_2"></use>
                </svg>
                <div class="name">逻辑_减_2</div>
                <div class="code-name">#icon-luoji_jian_2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luoji_dui_2"></use>
                </svg>
                <div class="name">逻辑_对_2</div>
                <div class="code-name">#icon-luoji_dui_2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang_1"></use>
                </svg>
                <div class="name">收藏_1</div>
                <div class="code-name">#icon-shoucang_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang_0"></use>
                </svg>
                <div class="name">收藏_0</div>
                <div class="code-name">#icon-shoucang_0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian_bianji"></use>
                </svg>
                <div class="name">文件_编辑</div>
                <div class="code-name">#icon-wenjian_bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian_wendang"></use>
                </svg>
                <div class="name">文件_文档</div>
                <div class="code-name">#icon-wenjian_wendang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian_zhongdian"></use>
                </svg>
                <div class="name">文件_重点</div>
                <div class="code-name">#icon-wenjian_zhongdian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-feiji"></use>
                </svg>
                <div class="name">飞机</div>
                <div class="code-name">#icon-feiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinghao"></use>
                </svg>
                <div class="name">井号</div>
                <div class="code-name">#icon-jinghao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitong"></use>
                </svg>
                <div class="name">系统</div>
                <div class="code-name">#icon-xitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengxu"></use>
                </svg>
                <div class="name">程序</div>
                <div class="code-name">#icon-chengxu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
